<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
    <link
      href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="container">
      <!-- 最左侧 -->
      <div class="sidebar">
        <div class="top">
          <div class="fa fa-rocket fa-lg"></div>
          <div class="fa fa-envelope fa-lg"></div>
          <div class="fa fa-gamepad fa-lg"></div>
          <div>+</div>
        </div>
        <div class="foot">
          <div class="fa fa-qrcode"></div>
          <div class="fa fa-cog"></div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="menu">
        <div class="mcontainer">
          <div class="titleList">
            <div class="head">
              <div class="title">MENU</div>
              <div class="fa fa-fa fa-cog icon"></div>
            </div>
            <div class="content">
              <ul class="sec">
                <div>
                  <li>Overview</li>
                </div>
                <div>
                  <li>Sales</li>
                  <div class="number">54</div>
                </div>
                <div>
                  <li>Your Staff</li>
                </div>
                <div>
                  <li>Analytics & Targeting</li>
                </div>
                <div>
                  <li>What's New</li>
                </div>
              </ul>
            </div>
          </div>
          <!-- 第二部分 -->
          <div class="titleList">
            <div class="head">
              <div class="title">YOUR PRODUCTS</div>
              <div class="fa fa-fa fa-cog icon"></div>
            </div>
            <div class="content">
              <ul class="sec">
                <div>
                  <div class="fa fa-book"></div>
                  <li>Books</li>
                </div>
                <div>
                  <div class="fa fa-video"></div>
                  <li>Tutorials</li>
                </div>
                <div>
                  <div class="fa fa-file-image"></div>
                  <li>Stocks</li>
                </div>
                <div>
                  <div class="fa fa-list"></div>
                  <li>Infographics</li>
                </div>
              </ul>
            </div>
          </div>
          <!-- 第三部分 -->
          <div class="titleList">
            <div class="head">
              <div class="title">DASHBOARD</div>
              <div class="fa fa-fa fa-cog icon"></div>
            </div>
            <div class="content">
              <ul class="sec">
                <div>
                  <!-- <div class="fa fa-book"></div> -->
                  <li>Messages</li>
                  <div class="number">21</div>
                </div>
                <div>
                  <!-- <div class="fa fa-book"></div> -->
                  <li>Connections</li>
                </div>
                <div>
                  <!-- <div class="fa fa-book"></div> -->
                  <li>Integrations</li>
                  <div class="number important">!</div>
                </div>
                <div>
                  <!-- <div class="fa fa-book"></div> -->
                  <li>Account Settings</li>
                </div>
                <div>
                  <!-- <div class="fa fa-book"></div> -->
                  <li>App Settings</li>
                </div>
              </ul>
            </div>
          </div>
          <div class="footbar">
            <div class="footone">
              <span>Monthly Goals</span><span>$580/$3200</span>
            </div>
            <div class="foottwo">
              <div class="line"></div>
            </div>
          </div>
      </div>
    </div>
    <!-- 主体 -->
    <div class="main">
      <!-- 标题区 -->
      <div class="title">
        <div class="tagname">
          <h1>Messages</h1>
        </div>
        <div class="user">
          <div class="head"><img width="100%" height="100%" src="./imgs/01.jpg" alt=""></div>
          <div class="cont">
            <p>Jimmy Y.</p>
            <p>Administractor</p>
          </div>
          <div class="fa fa-angle-down downs fa-lg"></div>
        </div>
      </div>
      <!-- 内容区 -->
      <div class="maincontent">
        <div class="chatmenber">
          <!-- 搜索框 -->
          <div class="search">
            <div class="input">
              <input placeholder="Search" type="text">
              <div class="fa fa-search searchbar"></div>
            </div>
          </div>
          <!-- 聊天列表 -->
          <div class="chatlist">
            <div class="member showborder">
              <div class="fcontainer">
                <div class="shang">
                  <div class="toux">
                    <img src="./imgs/07.jpg" width="100%" height="100%" alt="">
                  </div>
                  <div class="names">
                    <div>
                      <div class="spot show"></div>
                      <p class="username check">Bessie Berry</p>
                    </div>
                    <p class="shebei">Twitter</p>
                  </div>
                  <div class="juli">
                    5m
                  </div>
                </div>
                <div class="xia">
                  <div class="text">
                    Lorem ipsum dolor sit amet consectetur ysh adipisicing elit. Maxime, earum!
                  </div>
                  <div class="chatcounts showcont">
                    <div class="conts">4</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="member">
              <div class="fcontainer">
                <div class="shang">
                  <div class="toux">
                    <img src="./imgs/03.jpg" width="100%" height="100%" alt="">
                  </div>
                  <div class="names">
                    <div>
                      <div class="spot"></div>
                      <p class="username">Victor Weber</p>
                    </div>
                    <p class="shebei">Twitter</p>
                  </div>
                  <div class="juli">
                    8m
                  </div>
                </div>
                <div class="xia">
                  <div class="text">
                    Lorem ipsum dolor sit amet consectetur ysh adipisicing elit. Maxime, earum!
                  </div>
                  <div class="chatcounts">
                    <div class="conts">4</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="member">
              <div class="fcontainer">
                <div class="shang">
                  <div class="toux">
                    <img src="./imgs/04.jpg" width="100%" height="100%" alt="">
                  </div>
                  <div class="names">
                    <div>
                      <div class="spot"></div>
                      <p class="username">Dustin Benson</p>
                    </div>
                    <p class="shebei">Twitter</p>
                  </div>
                  <div class="juli">
                    Yesterday
                  </div>
                </div>
                <div class="xia">
                  <div class="text">
                    Lorem ipsum dolor sit amet consectetur ysh adipisicing elit. Maxime, earum!
                  </div>
                  <div class="chatcounts">
                    <div class="conts">4</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="member">
              <div class="fcontainer">
                <div class="shang">
                  <div class="toux">
                    <img src="./imgs/05.jpg" width="100%" height="100%" alt="">
                  </div>
                  <div class="names">
                    <div>
                      <div class="spot"></div>
                      <p class="username">Jack Mason</p>
                    </div>
                    <p class="shebei">Twitter</p>
                  </div>
                  <div class="juli">
                    Yesterday
                  </div>
                </div>
                <div class="xia">
                  <div class="text">
                    Lorem ipsum dolor sit amet consectetur ysh adipisicing elit. Maxime, earum!
                  </div>
                  <div class="chatcounts">
                    <div class="conts">4</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="member">
              <div class="fcontainer">
                <div class="shang">
                  <div class="toux">
                    <img src="./imgs/06.jpg" width="100%" height="100%" alt="">
                  </div>
                  <div class="names">
                    <div>
                      <div class="spot"></div>
                      <p class="username">Stephen Sheltion</p>
                    </div>
                    <p class="shebei">Twitter</p>
                  </div>
                  <div class="juli">
                    16 May
                  </div>
                </div>
                <div class="xia">
                  <div class="text">
                    Lorem ipsum dolor sit amet consectetur ysh adipisicing elit. Maxime, earum!
                  </div>
                  <div class="chatcounts">
                    <div class="conts">4</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="member">
              <div class="fcontainer">
                <div class="shang">
                  <div class="toux">
                    <img src="./imgs/02.jpg" width="100%" height="100%" alt="">
                  </div>
                  <div class="names">
                    <div>
                      <div class="spot"></div>
                      <p class="username">Sally Willis</p>
                    </div>
                    <p class="shebei">Twitter</p>
                  </div>
                  <div class="juli">
                    16 May
                  </div>
                </div>
                <div class="xia">
                  <div class="text">
                    Lorem ipsum dolor sit amet consectetur ysh adipisicing elit. Maxime, earum!
                  </div>
                  <div class="chatcounts">
                    <div class="conts">4</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="blog">
          <div class="checkUser">
            <div class="checkUserName">
              <h2>Bessie Berry</h2>
              <div class="online"></div>
            </div>
            <div class="checkUserdo">
              <div class="leftdo">
                <div class="fa fa-bath"></div>
                <div class="fa fa-bell"></div>
                <div class="fa fa-heart"></div>        
              </div><span>|</span>
              <div class="rightdo">
                <span>1 of 28</span>
                <div class="btn">
                  <div class="fa fa-caret-left"></div>
                  <div class="fa fa-caret-right"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="pengyouquan">
            <div class="yesterday">
              <div class="amsg">
                <div class="leftcount">
                  <div class="lefttoux">
                    <img src="./imgs/07.jpg" width="100%" height="100%" alt="">
                  </div>
                </div>
                <div class="senmsg">
                  <div class="username"><span>Bessle Berry</span><span>8:31 AM</span></div>
                  <div class="saytontent">
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum, atque suscipit aperiam itaque ipsa quod repudiandae autem accusamus vel quam expedita et. Perspiciatis voluptatem, tempora placeat veniam laboriosam itaque tenetur ea sapiente incidunt quasi nihil dolores id. Recusandae qui ex corrupti cumque asperiores, sunt animi, debitis consequuntur, omnis voluptatem magnam.
                  </div>
                </div>
              </div>
              <div class="amsg">
                <div class="leftcount">
                  <div class="lefttoux">
                    <img src="./imgs/06.jpg" width="100%" height="100%" alt="">
                  </div>
                </div>
                <div class="senmsg">
                  <div class="username"><span>Stephen Sheltion</span><span>8:31 AM</span></div>
                  <div class="saytontent">
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores nihil reprehenderit deserunt commodi, neque possimus soluta officiis nam mollitia deleniti libero sint dignissimos dolorum quam ducimus minima iure quo, accusamus hic praesentium doloremque vel? Id minus incidunt quidem natus eveniet officia, quisquam dolor sint voluptas architecto ut in ipsum, expedita laudantium totam, ratione ipsam suscipit. Exercitationem, distinctio nihil dicta laboriosam dolore qui tempora aliquid repellat ratione nemo, nostrum cum hic, numquam perspiciatis illo consequatur rem dolores eligendi quam. Dolorem ducimus perspiciatis numquam, obcaecati blanditiis quaerat id fugiat veritatis hic totam.
                  </div>
                </div>
              </div>
            </div>
            <div class="guoqu">
              <div class="guoqumsg">Tuesday</div>
            </div>
            <div class="yesterday">
              <div class="amsg">
                <div class="leftcount">
                  <div class="lefttoux">
                    <img src="./imgs/04.jpg" width="100%" height="100%" alt="">
                  </div>
                </div>
                <div class="senmsg">
                  <div class="username"><span>Dustin Bension</span><span>8:31 AM</span></div>
                  <div class="saytontent">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam esse, voluptates nulla quia corrupti dolores inventore officiis totam ab nostrum, impedit aut magnam architecto at, ipsum quos. Asperiores, quasi architecto.
                  </div>
                  <div class="pic">
                    <div><img src="./imgs/slide4.jpg" width="100%" height="100%" alt=""></div>
                    <div><img src="./imgs/slide6.jpg" width="100%" height="100%" alt=""></div>
                  </div>
                </div>
              </div>
              <div class="amsg">
                <div class="leftcount">
                  <div class="lefttoux">
                    <img src="./imgs/02.jpg" width="100%" height="100%" alt="">
                  </div>
                </div>
                <div class="senmsg">
                  <div class="username"><span>Sally Willis</span><span>8:31 AM</span></div>
                  <div class="saytontent">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur similique asperiores omnis repellendus, maxime magnam magni ipsam ab. Culpa eligendi debitis odit quia ut a!
                  </div>
                </div>
              </div>
              <div class="amsg">
                <div class="leftcount">
                  <div class="lefttoux">
                    <img src="./imgs/03.jpg" width="100%" height="100%" alt="">
                  </div>
                </div>
                <div class="senmsg">
                  <div class="username"><span>Victor Weber</span><span>8:31 AM</span></div>
                  <div class="saytontent">
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti blanditiis iure quo soluta in repellat mollitia laborum illum eligendi molestiae aperiam fuga ipsam voluptatem labore, laudantium culpa natus nemo ut quae velit nihil ipsum dolores, quaerat voluptatum! Neque, eveniet!
                  </div>
                </div>
              </div>
            </div>
            <div class="guoqu xin">
              <div class="guoqumsg xinmsg">New Message</div>
            </div>
            <div class="add">
              <div class="addbtn">
                <div class="click">+</div>
                <div class="addmsg">
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi quia odio sit quod?
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
